
<style>
.apple_overlay {
	
	/* initially overlay is hidden */
	display:none;
	
	/* growing background image */
	background-image:url(<?php echo base_url()?>img/app/white.png);
	
	/* 
		width after the growing animation finishes
		height is automatically calculated
	*/
	width:400px;
height:200px;	
	
	/* some padding to layout nested elements nicely  */
	padding:35px;

	/* a little styling */	
	font-size:11px;
}

/* default close button positioned on upper right corner */
.apple_overlay .close {
	background-image:url(<?php echo base_url()?>img/app/close.png);
	position:absolute; right:5px; top:5px;
	cursor:pointer;
	height:35px;
	width:35px;
}
</style>



<button id="compose_btn" rel="#compose" class="btn primary small">Compose new</button>
<?php
foreach ($senders as $sender){
?>
<div style="background :#ffffcc; box-shadow:0 0 1px #333;">
<a href="#"><?php echo $sender['from']." (".$sender['count'].")"?></a>
<p>
<?php echo $sender['isi'];?>
</p>
</div>

<?php
}
?>

<div id="compose" class="apple_overlay">
<h4>Tulis Pesan Baru</h4>
<form>
<table>
<tr>
<td>Kepada 	:</td><td> <input type="text" name="to"></td>
</tr>
<tr>
<td>Pesan	:</td><td> <textarea cols=50 rows=5></textarea></td>
</tr>
<tr>
<td colspan=2><button class="btn primary">Kirim</button></td></tr>
</table>
</form>
</div>

<script>
$(document).ready(function(e){
 $("#compose_btn[rel]").overlay({mask: '#333',effect:'apple'});
});


</script>
